<template>
	<view class="container">
		<!-- 会员背景 -->
		<image src="../../static/img/hybg.jpg" mode="" class="hybg"></image>
		<!-- 会员卡 -->
		<view class="hyk">
			<image src="../../static/img/hyk.png" mode="" class="hykimg"></image>
			<view class="hytext">
				<text v-if="!hyInfo">您暂未开通会员</text>
			</view>
			<view v-if="hyInfo" class="hyInfo">
				<h3 v-if="hyInfo.hyState==''||hyInfo.hyState==NULL">{{hyInfo.u_name}}</h3>
				<view class="djs">{{countdown}}</view>
				<view class="yxq">有效期：{{hyInfo.joinTime}}&nbsp;至&nbsp;{{hyInfo.endTime}}</view>
			</view>
			<!-- 会员卡列表 -->
			<view class="hyList">
				<view class="ListTit">
					<image src="../../static/img/hyk1.png" mode=""></image>
				</view>
				<!-- 会员列表 -->
				<view class="hyLi">
					<ul>
						<li v-for="(item, index) in memberList" :key="index" v-if="item.id!==hyInfo.u_id||hyInfo.hyState=='已到期'">
							<!-- 列表背景图 -->
							<image src="../../static/img/hyl.png" mode="" class="hyl"></image>
							<!-- 左侧名称和价格 -->
							<view class="hyLeft">
								{{item.gradeName}}
								<view class="hyLtext">
									￥{{item.setPrice}}
								</view>
								<!-- 详情按钮图片 -->
								<image src="../../static/img/xq.png" mode="" class="xqimg" @click="handleXq(item.id)"></image>
							</view>
							<!-- 右侧按钮 -->
							<button type="button" class="hybtn" @click="handleKt(item)">我要开通</button>
						</li>
					</ul>
				</view>
			</view>
		</view>
		<!-- 详情图片的弹窗 -->
		<view class="hyTc" v-show="isShow">
			<image src="../../static/img/gb.png" mode="" class="colse" @click="handleGb"></image>
			<ul class="tcCon">
				<li>
					<text>会员等级：</text>{{info.gradeName}}
				</li>
				<li>
					<text>会员价格：</text>{{info.setPrice}}元
				</li>
				<li>
					<text>会员折扣：</text>{{info.dz}}
				</li>
				<li>
					<text>会员有效期：</text>{{info.year}}年
				</li>
				<li v-if="info.remark">
					<text>详情内容：</text>
					<view v-html="info.remark"></view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import { memberL,memberDetails } from '@/api/member.js'
	import { userInfo ,getHyInfo} from '@/api/api.js'
	import { getPay,getEnrollTran } from '@/api/pay.js'
	export default {
		data() {
			return {
				memberList:[],
				isShow:false,
				info:{},
				infoData:{},
				openid:"",
				paymentTrade:"",
				joinTime:"",
				endTime:"",
				hyInfo:{},
				targetTime:"",//截止时间
				countdown:"",//倒计时显示
			}
		},
		onLoad() {
			this.getData();
			this.getUserInfo();
		},
		onUnload() {
		    // 清除定时器
		    clearInterval(this.intervalId);
		  },
		methods: {
			// 查询会员价格列表
			getData(){
				memberL().then((res) => {
					if(res.data.length>0){
						this.memberList = res.data
						console.log('this.memberList',this.memberList)
						for (let i = 0; i < this.memberList.length; i++) {
							this.memberList[i].setPrice = this.memberList[i].setPrice.replace(/\.00$/, '');
						}
					}
				  })
			},
			
			//点击会员详情弹窗
			handleXq(id){
				this.isShow = true
				memberDetails(id).then((res) => {
					if(res.data){
						this.info = res.data
						console.log('this.info',this.info)
					}
				  })
			},
			
			// 关闭弹窗
			handleGb(){
				this.isShow = false
			},
			
			// 查询用户信息
			getUserInfo(){
				let that = this
				// 获取缓存
				uni.getStorage({
				    key: 'data1',
				    success: function (res) {
						that.openid = res.data.openid
						// 查询用户信息表中是否有该手机号
						userInfo(res.data.phone).then((userRes) => {
							that.infoData = userRes.info
							that.getInfo(that.infoData.id)
						  })
				    }
				});
			},
			
			// 根据用户id查询会员中是否有该用户
			getInfo(id){
				let data = {
					id:id
				}
				getHyInfo(data).then((res) => {
					if(res.code==200){
						this.hyInfo = res.info
						console.log('111',this.hyInfo)
						// 如果开通了会员做倒计时
						if(this.hyInfo){
							this.targetTime = this.hyInfo.endTime
							this.tartCountdown()
						}
					}
				  })
			},
			
			// 倒计时
			tartCountdown() {
			      let target = new Date(this.targetTime).getTime();
			      let now = new Date().getTime();
			      let distance = target - now;
			 
			      if (distance < 0) {
			        this.countdown = '已到期';
			        clearInterval(this.intervalId);
			        return;
			      }
			 
			      this.countdown = this.formatCountdown(distance);
			      this.intervalId = setInterval(() => {
			        distance = target - new Date().getTime();
			        if (distance < 0) {
			          clearInterval(this.intervalId);
			        } else {
			          this.countdown = this.formatCountdown(distance);
			        }
			      }, 1000);
			    },
				formatCountdown(distance) {
				      // 获取时间单位
				      let days = Math.floor(distance / (1000 * 60 * 60 * 24));
				      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
				 
				      return days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";
				    },
			
			
			// 点击按钮开通会员
			handleKt(item){
				let that = this
				let temp = {
				  hname:item.gradeName,
				  name:that.infoData.userName,
				  phone:that.infoData.phone,
				  card:that.infoData.card,
				  price : item.setPrice,
				  openid:that.openid,
				  payment_type:3,
				  hid:item.id,
				};
				// 支付订单
				getPay(temp).then((res) => {
					// 商户号
					that.paymentTrade = res.dataInfo
					 // 调起支付接口
					 uni.requestPayment({
						provider: "wxpay",
						appid: res.data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						package: res.data.package, // 固定值
						paySign: res.data.paySign, //签名
						signType: res.data.signType, // 签名算法，这里用的 MD5/RSA 签名
						nonceStr: res.data.nonceStr, // 随机字符串
						success(res) {
							if (res.errMsg == "requestPayment:ok") {
								uni.showToast({
										title: '支付成功',
										icon: 'success',
								});
							}
						},
						fail(e) {
							if (e.errMsg == "requestPayment:fail cancel") {
								uni.showToast({
										title: '取消支付',
										icon: 'none',
									});
							} else {
								uni.showToast({
										title: '取消失败',
										icon: 'error',
									});
									}
								}
							})
				 })
			},
		}
	}
</script>

<style>
	.container{
		width: 100%;
		position: relative;
	}
	.hybg{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	
	.hyk{
		position: absolute;
		top: 160rpx;
		right: 0;
		left: 0;
		z-index: 9999;
		width: 90%;
		margin: 0 auto;
	}
	
	.hykimg{
		width: 100%;
		height: 400rpx;
	}
	
	.hyk text{
		/* position: ; */
	}
	
	.hytext{
		position: relative;
		top:-230rpx;
		text-align:center;
		color: #b7996a;
		
	}
	
	.ListTit{
		width: 100%;
		text-align: center;
		position: relative;
	}
	
	.ListTit image{
		width: 100%;
		height: 97rpx;
	}
	
	.hyList{
		margin-top: -40rpx;
	}
	
	.hyLi{
		margin-top: 42rpx;
	}
	
	.hyLi ul li{
		margin-top: 40rpx;
		position: relative;
	}
	
	.hyl{
		height: 174rpx;
		width: 100%;
	}
	
	.hybtn{
		background: #c77c3b;
		color: #fff;
		width: 200rpx;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		position: absolute;
		top: 47%;
		transform: translateY(-50%);
		right: 40rpx;
		background-image: linear-gradient(to right, #c97a3d, #774a2d);
	}
	
	.hyLeft{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		/* left: 130rpx; */
		font-family: cursive;
		font-size: 50rpx;
		color: #794831;
		font-weight: bold;
		text-align: center;
		width: 400rpx;
		font-size: 40rpx;
	}
	
	.hyLtext{
		font-size: 34rpx;
		margin-top: 5rpx;
	}
	
	.xqimg{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		right: 44rpx;
	}
	
	.hyTc{
		background: #fff;
		padding: 20rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 80%;
		z-index: 9999;
		margin: 0 auto;
		box-shadow: 1px 1px 10px #ddd;
		transition: opacity 0.5s ease;
		opacity: 1;
		 border: 4px solid transparent;
		border-radius: 20rpx;
		background-clip: padding-box; /* 确保背景不会显示在圆角外 */
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
		color: #7c482d;
	}
	
	.hyTc text{
		font-weight: 600;
	}
	.hyTc:before {
	    content: '';
	    position: absolute;
	    top: -4px;
	    right: -4px;
	    bottom: -4px;
	    left: -4px;
	    z-index: -1;
	    background: linear-gradient(to bottom, #ecd6ab, #d3a86a);
	    border-radius: inherit; /* 继承圆角 */
	  }
	
	.hyTc[v-show="false"]{
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	
	.colse{
		width: 40rpx;
		height: 40rpx;
		float: right;
	}
	
	.tcCon{
		font-size: 29rpx;
		line-height: 60rpx;
	}
	
	.yxq{
		font-size: 24rpx;
	}
	
	.djs{
		margin: 20rpx 0;
	}
	
	.hyInfo{
		position: relative;
		top: -280rpx;
		text-align: center;
		color: #b7996a;
	}
</style>